<template>
  <div id="mapEcharts">
    <div class="map-imgs">
      <VEcharts
        ref="map"
        autoresize
        :options="opts"
        style="width: 100%; height: 100%"
        @click="townClick"
      />
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import _ from 'lodash';
// 深度克隆
// const Data = {
//   '齐贤': [120.49476, 30.08189],
//   '马鞍': [120.589607, 30.14575]
//   // '安昌':[]
// };
export default {
  name: 'MapEcharts',
  components: {
    VEcharts
  },
  props: {
    // myStyle: {
    //   type: Number,
    //   default: 1
    // },
    orGanize: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      map: 'shaoxin' // keqiao shaoxin  zhejian
    };
  },
  computed: {
    mapZomm() {
      let zoom = 1.5;
      this.map === 'keqiao'
        ? zoom = 1.1 : '';
      return zoom;
    },
    realOrGanize() {
      const newArr = [
        {
          name: '齐贤',
          value: 10
        },
        {
          name: '马鞍',
          value: 26
        },
        {
          name: '安昌',
          value: 5
        },
        {
          name: '华舍',
          value: 6
        },
        {
          name: '柯桥',
          value: 6
        },
        {
          name: '柯岩',
          value: 7
        },
        {
          name: '钱清',
          value: 2
        },
        {
          name: '杨汛桥',
          value: 4
        }, {
          name: '湖塘',
          value: 10
        },
        {
          name: '夏履',
          value: 10
        },
        {
          name: '漓渚',
          value: 22
        },
        {
          name: '福全',
          value: 40
        },
        {
          name: '平水',
          value: 40
        }, {
          name: '兰亭',
          value: 15
        }, {
          name: '稽东',
          value: 10
        }, {
          name: '王坛',
          value: 5
        }
      ];
      return newArr;
    },
    // mapFontbg() {
    //   if (this.myStyle === 1) {
    //     return 'white';
    //   } else if (this.myStyle === 2) {
    //     return '#00e3f9';
    //   }
    //   return false;
    // },
    // mapActiveItembg() {
    //   if (this.myStyle === 1) {
    //     return '#3499f9';
    //   } else if (this.myStyle === 2) {
    //     return '#004073';
    //   }
    //   return false;
    // },
    opts() {
      const _this = this;
      const baseMap = {
        name: '柯桥',
        type: 'map',
        mapType: this.map,
        roam: 'true', // 拖拽
        aspectScale: 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
        zoom: this.mapZomm, // 地图大小
        itemStyle: {
          // 地图样式
          normal: {
            borderColor: '#26323869',
            borderWidth: 1,
            areaColor: '#88C2F9',
            shadowColor: 'rgba(0, 0, 238,.02)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5
          }
        },

        emphasis: {
          // 鼠标移入动态的时候显示的默认样式
          itemStyle: {
            // borderColor: '#26323869',
            borderWidth: 1,
            // areaColor: '#88C2F9',
            shadowColor: 'rgba(0, 0, 238,.02)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 5
          }
        },
        showLegendSymbol: false, // 省份对应位子的红点
        label: {
          show: false,
          offset: [120, 40],
          // 'normal': {
          //     'show': true,
          //     // 'color': _this.mapFontbg,
          //     'color': '#D9E9EA',
          //     'fontWeight': 600,
          //     'fontSize': 28,
          //     'formatter': '{b}'
          // },
          emphasis: {
            show: false,
            // color: _this.mapFontbg,
            fontSize: 28,
            fontWeight: 300,
            formatter: '{b}'
          }
        },
        layoutCenter: ['45%', '48%'],
        layoutSize: '100%',
        // geoIndex: 0,
        data: _this.realOrGanize,

        silent: true // 鼠标悬浮事件禁用
        // data: _this.realOrGanize
      };

      const map1 = _.cloneDeep(baseMap);
      const map2 = _.cloneDeep(baseMap);
      const map3 = _.cloneDeep(baseMap);
      const map4 = _.cloneDeep(baseMap);
      const map5 = _.cloneDeep(baseMap);
      const map6 = _.cloneDeep(baseMap);
      const map7 = _.cloneDeep(baseMap);
      const map8 = _.cloneDeep(baseMap);
      const map9 = _.cloneDeep(baseMap);
      const map10 = _.cloneDeep(baseMap);

      Object.assign(map2, { mapType: this.map + '1', zoom: this.mapZomm, layoutCenter: ['45%', '47.9%'] });
      Object.assign(map3, { mapType: this.map + '2', zoom: this.mapZomm, layoutCenter: ['45%', '47.8%'] });
      Object.assign(map4, { mapType: this.map + '3', zoom: this.mapZomm, layoutCenter: ['45%', '47.7%'] });
      Object.assign(map5, { mapType: this.map + '4', zoom: this.mapZomm, layoutCenter: ['45%', '47.6%'] });
      Object.assign(map6, { mapType: this.map + '5', zoom: this.mapZomm, layoutCenter: ['45%', '47.5%'] });
      Object.assign(map7, { mapType: this.map + '6', zoom: this.mapZomm, layoutCenter: ['45%', '47.4%'] });
      Object.assign(map8, { mapType: this.map + '7', zoom: this.mapZomm, layoutCenter: ['45%', '47.3%'] });
      Object.assign(map9, { mapType: this.map + '8', zoom: this.mapZomm, layoutCenter: ['45%', '47.2%'] });
      Object.assign(map10, { mapType: this.map + '9', zoom: this.mapZomm, layoutCenter: ['45%', '4719%'] });

      map1.itemStyle.normal = {
        itemStyle: {
          // areaColor: _this.mapActiveItembg,
          borderColor: '#0A0131',
          borderWidth: 0.3,
          shadowColor: 'rgba(0, 0, 0, .6)',
          shadowBlur: 5,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      };
      return {
        tooltip: {
          // formatter: '{b}',
          // formatter: `风险等级: ${'{c}' === 10 ? '低风险' : '高风险'}`
          formatter: (e) => {
            const { value, name } = e;
            if (this.map === 'keqiao') {
              let str;
              if (value >= 0 && value < 20) {
                str = '<span style=\"color:#37CA61\">无风险</span>';
              } else if (value >= 20 && value < 40) {
                str = '<span style=\"color:#C1C919\">低风险</span>';
              } else if (value >= 40 && value < 80) {
                str = '<span style=\"color:#E3680D\">中风险</span>';
              } else if (value >= 80) {
                str = '<span style=\"color:#9F2115\">高风险</span>';
              }
              return `风险等级:&nbsp;&nbsp;${str}`;
            } else {
              return name;
            }
          }
        },
        legend: {
          show: false
        },
        // 左边的图例
        visualMap: {
          // 分段映射
          type: 'piecewise',
          calculable: true,
          // 分几段.默认5段
          splitNumber: 4,
          // 每一段的范围
          pieces: [
            { gte: 80, lte: 100, label: '高风险', color: '#9f2115' },
            { gte: 40, lt: 80, label: '中风险', color: '#E3680D' },
            { gte: 20, lt: 40, label: '低风险', color: '#C1C919' },
            { gte: 0, lt: 20, label: '风险未知', color: '#37ca61' }
          ],
          right: '5%',
          bottom: '10%',
          align: 'left',
          // // 图例颜色
          // 字体颜色
          textStyle: {
            color: '#fff'
          }
        },
        selectedMode: 'single',
        series: [
          map1,
          map2,
          map3,
          map4,
          map5,
          map6,
          map7,
          map8,
          map9,
          map10,
          {
            name: '齐贤街道',
            type: 'map',
            // type: 'custom',
            // coordinateSystem: 'geo',
            geoIndex: 1,
            mapType: this.map + 'zi',
            roam: false, // 拖拽
            aspectScale: 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
            zoom: this.mapZomm, // 地图大小
            itemStyle: {
              // 地图样式
              normal: {
                borderColor: 'rgba(0,0,0,0.20)',
                borderWidth: 2,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1fd2ff' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1fd2ff' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(128, 217, 248, 1)',
                boxShadow: '9px 9px 25px 0px rgba(0,0,0,0.20)'
                // shadowColor: "#0169d4",
                // shadowOffsetX: -2,
                // shadowOffsetY: 2,
                // shadowBlur: 20
              }
            },
            emphasis: {
              // 鼠标移入动态的时候显示的默认样式
              itemStyle: {
                // areaColor: _this.mapActiveItembg,
                // borderColor: '#404a59',
                borderWidth: 0.1,
                shadowColor: 'rgba(0, 0, 0, .6)',
                shadowBlur: 5,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            showLegendSymbol: false, // 省份对应位子的红点
            label: {
              normal: {
                show: true,
                // 'color': _this.mapFontbg,
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
                formatter: '{b}'
              },
              emphasis: {
                show: true,
                color: '#fff',
                // 'color': _this.mapFontbg,
                fontSize: 22,
                fontWeight: 600,
                formatter: '{b}'
              }
            },
            grid: {},
            layoutCenter: ['45%', '47.0%'],
            layoutSize: '100%',
            data: _this.realOrGanize

            // data: [{ name: '齐贤', value: 1 }]
          }
        ]
      };
    }
  },
  methods: {
    townClick(e) {
      const { name } = e;

      switch (name) {
         case '绍兴市':
          this.$router.push('/largeScreen2')
          break;
        case '柯桥区':
            this.$router.push('/largeScreen3')
          break;
        case '齐贤':
          this.$router.push('/largeScreen4');
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style scoped>
#mapEcharts {
  width: 100%;
  height: 100%;
  position: relative;
  top: 1rem;
}
.map-imgs {
  height: 100%;
  position: relative;
}

.map-imgs > img {
  width: 9rem;
  height: 9rem;
}
.jinglingzhen {
  position: absolute;
  bottom: 20%;
  left: 10%;
}
</style>
